Carousels

What are Carousels?

Carousels are a way to display products in a horizontal scrollable list. They are a great way to highlight products that you want to promote to your users. They are also a great way to show products that are related to the product that the user is currently viewing.

How do Carousels work in Algolia?

Think of a carousel as simply a mini search results page in a unique design i.e. a horizontal scroll.

Therefore, the results which are shown, are dictated by the API request sent to Algolia by that carousel.

You can create the results for the carousel by combining any Algolia features such as: query, filter, sort, merchandising, recommend (i.e. trending, frequently bought together, related products etc.)

Please note that carousels can also be fully personalised, just as the result of the Algolia results can be.

How do I configure Carousels?

Merchandisers

You will need to interface with your developers to configure the carousels. This is to keep things flexible. You will need to provide them with the following information:

The name of the carousel
The context in which the carousel should be shown i.e. homepage, product page, category page etc.
What you would like to show in the carousel

If you would like to merchandise the carousel, rather than it being entirely powered by a query/filter etc. then you will need to create a rule in the Algolia dashboard. You should choose "context" as a trigger.

This rule will then be triggered when the context is sent over in the API request. You can then configure the rule to show the products you want to show in the carousel.

Your engineering team will ensure the context is sent over in the API request for the relevant page.

Developers

Carousels can either be hardcoded by the frontend of your application, or they can be configured using the Algolia dashboard.

For example, your frontend can send a request to Algolia with a query of * and a filter of brand:Apple and a sort of price:asc and a limit of 10 and instruct the results to be shown in a carousel. This will then show the 10 cheapest Apple products in a carousel.

Alternatively, you can set your frontend up to create a carousel for a rule context. This context can then be fully configured in the Algolia dashboard. For more info on rule contexts, please see here.

For the carousel frontend, we have provided libraries to help you get started such as: https://github.com/algolia/ui-components/tree/master/packages/horizontal-slider-react

Boilerplate implementation of Carousels

Carousels are configured using rule contexts. You can configure your carousels by going to config/carouselConfig and adjusting the values for each context. You must ensure you have a rule in the algolia dashboard for each context, which pins products as this is what powers the carousels.

Inside featuresConfig.js, allow the shouldHaveCarousels const to be true. That should get the carousels showing on the homepage of the app.

After this, head to carouselConfig.js, where you can edit the context that is being sent to the API. This will help you to control and edit what is shown on these carousels.

To edit the title on the carousel, open translation.js where you can edit the titleCarousels array to change the respective titles of your carousels.

You can then head to the Algolia Dashboard to edit the rule contexts that are being sent over. This is done using the visual editor, where the Query is empty and is triggered by a context.

Then you can edit the Strategy to apply whichever pins or boosts that you like.